<template>
  <div class="app-container">
    <el-row :gutter="20">
      <div class="app-container">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="3"
            ><span class="el-custom-title"
              >下发产品工序线查询</span
            ></el-col
          >
          <el-col :span="21" style="font-size:13px;">
            <el-button-group style="float: right;">
              <el-button type="primary" size="mini" icon="el-icon-circle-close" @click="ui_update">
                作废
              </el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              align="center"
              label="productProcedureId"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.productProcedureId }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="factoryId"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.factoryId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="id" width="95" v-if="false">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="订单id"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.orderId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="订单编号" width="95">
              <template slot-scope="scope">
                {{ scope.row.orderNo }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="产品ID"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.productId }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="产品编号"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.productNo }}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="产品工序线编号"
              width="120"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.productProcedureNo }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="产品工序线名称"
              width="120"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.productProcedureName }}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="产线编号"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.produceLineNo }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="产线名称"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.produceLineName }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="所属工厂"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.factoryName }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="状态"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ resolveStatusValue(scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="备注"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.comment }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="审核时间"
              width="100"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.audittime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="审核人"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.audituser }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="下发时间"
              width="100"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.createtime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="下发人"
              width="95"
              style="display:none;"
            >
              <template slot-scope="scope">
                {{ scope.row.createuser }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="是否已删除"
              width="95"
              style="display:none;"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.isdeleted }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            :page-sizes="listQuery.pageSizes"
            @pagination="fetchData"
          />
        </el-row>
      </div>
    </el-row>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="productProcedureId" prop="productProcedureId">
          <el-input v-model="temp.productProcedureId" />
        </el-form-item>
        <el-form-item label="factoryId" prop="factoryId">
          <el-input v-model="temp.factoryId" />
        </el-form-item>
        <el-form-item label="produceProcedureId" prop="produceProcedureId">
          <el-input v-model="temp.produceProcedureId" />
        </el-form-item>
        <el-form-item label="createuser" prop="createuser">
          <el-input v-model="temp.createuser" />
        </el-form-item>
        <el-form-item label="createtime" prop="createtime">
          <el-input v-model="temp.createtime" />
        </el-form-item>
        <el-form-item label="status" prop="status">
          <el-input v-model="temp.status" />
        </el-form-item>
        <el-form-item label="comment" prop="comment">
          <el-input v-model="temp.comment" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? ui_create() : ui_update()"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import request from "@/utils/request";
import {
  getAll,
  getOne,
  getList,
  create,
  update,
  deleteBatch
} from "@/api/procedure/product/modelProductProcedureDispatch";

export default {
  components: { Pagination },
  data() {
    return {
      filterText: "",
      data2: [],
      defaultProps: {
        children: "children",
        label: "ModelProductProcedureDispatch"
      },
      list: null,
      list2: null,
      listLoading: true,
      total: 0,
      total2: 0,
      listQuery: {
        page: 1,
        limit: 6,
        pageSizes: [6, 10, 14]
      },
      listQuery2: {
        page: 1,
        limit: 6,
        pageSizes: [6, 10, 14]
      },
      currentModelProductProcedureDispatchId: 0,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建"
      },
      rules: {
        productProcedureId: [
          {
            required: true,
            message: "productProcedureId不能为空！",
            trigger: "change"
          }
        ],
        factoryId: [
          {
            required: true,
            message: "factoryId不能为空！",
            trigger: "change"
          }
        ],
        produceProcedureId: [
          {
            required: true,
            message: "produceProcedureId不能为空！",
            trigger: "change"
          }
        ],
        createuser: [
          {
            required: true,
            message: "createuser不能为空！",
            trigger: "change"
          }
        ],
        createtime: [
          {
            required: true,
            message: "createtime不能为空！",
            trigger: "change"
          }
        ],
        status: [
          {
            required: true,
            message: "status不能为空！",
            trigger: "change"
          }
        ],
        comment: [
          {
            required: true,
            message: "comment不能为空！",
            trigger: "change"
          }
        ]
      },
      temp: {
        id: 0,
        productProcedureId: 0,
        factoryId: 0,
        produceLineId: 0,
        createuser: "",
        createtime: "",
        status: 0,
        comment: ""
      },
      //表格變量
      lstSelected: [],
      lstStatus: [
        { label: "请选择", value: -1 },
        { label: "已提交", value: 0 },
        { label: "未审核", value: 1 },
        { label: "已审核", value: 2 },
        { label: "审核未通过", value: 3 },
        { label: "作废", value: 4 }
      ]
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
  filters: {
    formatDate(nowTime) {
      if (nowTime != null) {
        var moment = require("moment");
        return moment(nowTime).format("YYYY-MM-DD HH:mm:ss");
      }
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSelectionChange(val) {
      this.lstSelected = val;
    },
    fetchData() {
      this.listLoading = true;
      let params = {
        name: ""
      };
      getList(params).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },

    rowClick(row, column, event) {
      this.currentTherbligsTypeId = row.id;
      //this.getTherbligs()
    },
    ui_update() {
      if (this.lstSelected == null || this.lstSelected.length !== 1) {
        this.$message.error("请先选择一条下发产线");
        return;
      }
      this.temp = Object.assign({}, this.lstSelected[0]); // copy obj
      //设置作废
      this.temp.status = 4;
      update(this.temp).then(() => {
        const index = this.list.findIndex(v => v.id === this.temp.id);
        this.list.splice(index, 1, this.temp);
        this.dialogFormVisible = false;
        this.$notify({
          title: "Success",
          message: "作废成功！",
          type: "success",
          duration: 2000
        });
      });
    },
    resetTemp() {
      this.temp = {
        id: 0,
        productProcedureId: 0,
        factoryId: 0,
        produceLineId: 0,
        createuser: "",
        createtime: "",
        status: 0,
        comment: ""
      };
    },
    handleUpdate() {
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    resolveStatusValue(p) {
      let itm = this.lstStatus.find(v => {
        return v.value == p;
      });
      return itm == null ? "未知" : itm.label;
    }
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
